<template>
  <div style="background: #f6f7fb; min-height: 100px" class="pd16 flex-row-center-between br5 flex1">
    <div>
      <div>{{ props.title }}</div>
      <div class="mgt10">
        <el-link v-if="toPageList.includes(props.title)" type="primary" @click="toPageFaultList">
          <span class="bold mgr10 fs28">{{ props.count }}</span>
        </el-link>
        <span v-else class="bold mgr10 fs28">{{ props.count }}</span>
        <span class="grey-text" v-if="!props.count?.includes('%')">个</span>
      </div>
    </div>
    <div>
      <SvgIcon :name="props.iconName" :width="40" :height="40" color="#A4AEC4" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import router from '@/router'
  import dayjs from 'dayjs'

  interface IProps {
    title: string
    count: string
    iconName: string
  }

  const props = withDefaults(defineProps<IProps>(), {
    title: '',
    count: '0',
    iconName: ''
  })

  const toPageList = ['代理总数', '在线代理', '本月新增']

  /**----------------------------methods----------------------------------------------------------------------- */

  const toPageFaultList = () => {
    switch (props.title) {
      case '代理总数':
        toPageAgentListBySum()
        break
      case '在线代理':
        toPageAgentListByOnline()
        break
      case '本月新增':
        toPageAgentListByMonth()
        break
      default:
        break
    }
  }

  const toPageAgentListBySum = () => {
    router.push({
      path: '/agent/list'
    })
  }
  const toPageAgentListByOnline = () => {
    router.push({
      path: '/agent/list',
      query: {
        agentStatus: '1'
      }
    })
  }
  const toPageAgentListByMonth = () => {
    const [startTime, endTime] = getCurrentMonth()
    router.push({
      path: '/agent/list',
      query: {
        startTime,
        endTime
      }
    })
  }

  const getCurrentMonth = () => {
    const today = new Date()
    const currentMonth = today.getMonth()
    const currentYear = today.getFullYear()
    const startTime = new Date(currentYear, currentMonth, 1)
    const endTime = new Date(currentYear, currentMonth + 1, 0)
    return [dayjs(startTime).format('YYYY-MM-DD'), dayjs(endTime).format('YYYY-MM-DD')]
  }
</script>

<style scoped></style>
